<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本图形</title>
    <style>
        canvas {
            border: 1px solid #eee;
        }
    </style>
</head>

<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">

    // let canvas = document.getElementById("canvas");
    // let context = canvas.getContext("2d")
    //
    // context.rect(0, 0, canvas.width, canvas.height)
    //
    // var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height)
    // grd.addColorStop(0, '#8ED6FF')
    // grd.addColorStop(1, '#004CB3')
    //
    // context.fillStyle = grd
    // context.fill()


    let datMap = {
        "1": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "2": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "3": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "4": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "5": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "6": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "7": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "8": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "9": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "10": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "11": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "12": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "13": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "14": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "15": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "16": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "17": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "18": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "19": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "20": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "21": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "22": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "23": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        },
        "24": {
            "COD": "",
            "氨氮": "",
            "瞬时流量": "",
            "累计流量": ""
        }
    };
    let rules = {
        "万荣街一体化泵站": {
            "COD": [130, 140],
            "氨氮": [20, 40],
            "瞬时流量": [100, 105],
        },
        "万兴街一体化泵站": {
            "COD": [95, 110],
            "氨氮": [20, 40],
            "瞬时流量": [205, 215],
        },
        "万福街一体化泵站": {
            "COD": [100, 110],
            "氨氮": [20, 40],
            "瞬时流量": [140, 145],
        },
        "LYJHS22-23": {
            "COD": [95, 100],
            "氨氮": [20, 40],
            "瞬时流量": [7.5, 8.0],
        },
        "QZW163": {
            "COD": [95, 120],
            "氨氮": [20, 40],
            "瞬时流量": [68, 74],
        },
        "SW01": {
            "COD": [95, 105],
            "氨氮": [20, 40],
            "瞬时流量": [100, 105],
        }
    };
    let attrs = ['COD','氨氮','瞬时流量'];

    function getRandomDataByTypeCon(siteName, datMap, rules) {
        let mapData = {...datMap};
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24].forEach(v => {
            ['COD','氨氮','瞬时流量'].forEach(key => {
                let [start, end] = rules[siteName][key]
                let lastData = randomRangeNum(start, end, 2);
                // if(siteName === 'SW01' && key === '瞬时流量') lastData = 23
                mapData[v][key] = lastData
            })
        })
        return mapData
    }
    // getRandomDataByTypeCon('万荣街一体化泵站');
    // console.log(11111,datMap);

    ['万荣街一体化泵站', '万兴街一体化泵站', '万福街一体化泵站', 'LYJHS22-23', 'QZW163', 'SW01'].forEach(siteName => {
        let obj = {};
        obj[siteName] = getRandomDataByTypeCon(siteName, datMap, rules)
        console.log(siteName,getRandomDataByTypeCon(siteName, datMap, rules))
    })

    // console.log('mock---->', list);


    function randomRangeNum(maxNum, minNum, decimalNum) {
        var max = 0, min = 0;
        minNum <= maxNum ? (min = minNum, max = maxNum) : (min = maxNum, max = minNum);
        switch (arguments.length) {
            case 1:
                return Math.floor(Math.random() * (max + 1));
                break;
            case 2:
                return Math.floor(Math.random() * (max - min + 1) + min);
                break;
            case 3:
                return (Math.random() * (max - min) + min).toFixed(decimalNum);
                break;
            default:
                return Math.random();
                break;
        }
    }



</script>
</body>

</html>